<template>
  <view style="padding-bottom: 120rpx;">
    <!-- 用户信息 -->
    <view class="user-info-body">
      <view class="user-info">
        <!-- <image :src="user_info.head" mode="widthFix" class="user-header-img" @tap="toInfo()"></image> -->
        <view class="user-nick-name">
          <view v-if="!login_state" class="acitve">
            <image src="../../static/image/userindex/girl2.png" mode=""></image>
            您好！请登录</view
          >
          <view v-else class="dl_wz">
            <image
              :src="user_info.head"
              class="user-header-img"
              @tap="toInfo()"
            ></image>
            {{ user_info.nick_name }}</view
          >
        </view>
        <view class="user-login-btn" v-if="!login_state" @tap="toLogin()"
          >登录/注册</view
        >
      </view>
    </view>
    <!-- 订单菜单 -->
    <view class="order-menu">
      <order-menu
        :dfkNum="dfkNum"
        :dshNum="dshNum"
        :dfhNum="dfhNum"
        :dpjNum="dpjNum"
      ></order-menu>
    </view>
    <!-- 成绩资质  好友分享 -->
    <view class="user_ch">
      <view class="user_zz" @tap="toZZ"> </view>
      <view class="user_fx" @tap="toFX"> </view>
    </view>
    <!-- 菜单 -->

    <!-- 菜单 -->
    <view class="user-menu">
      <user-menu :menu="user_menu" @click-menu="clickMenu"></user-menu>
    </view>
    <web-load v-if="loading"></web-load>
  </view>
</template>

<script>
import orderMenu from "../../components/user/order-menu.vue";
import userMenu from "../../components/unit/menu.vue";
import webLoad from "../../components/unit/loading.vue";
export default {
  components: { orderMenu, userMenu, webLoad },
  data() {
    return {
      loading: true,
      list: [],
      dfkNum: 0, // 待付款的数量
      dshNum: 0, // 待收货的数量
      dfhNum: 0, // 待发货的数量
      dpjNum: 0, // 待评价的数量
      // user_menu : [
      // 	{name : '成绩资质' , icon:"&#xe6a5;"},
      // 	{name : '好友分享' , icon:"&#xe6a5;"},
      // 	{name : '收货地址' , icon:"&#xe646;"},
      // 	{name : '投诉建议' , icon:"&#xe60f;"},
      // 	{name : '设置' , icon:"&#xe722;"}
      // ],
      user_menu: [
        // {name : '成绩资质' , src:'../../static/image/userindex/zs02.png'},
        // {name : '好友分享' , src:'../../static/image/userindex/share02.png'},
		{ name: "我的收藏", src: "../../static/image/userindex/user_shouchang.png" },
        { name: "我的脚型", src: "../../static/image/userindex/foot_icon.png" },
        { name: "收货地址", src: "../../static/image/userindex/dz02.png" },
        { name: "投诉建议", src: "../../static/image/userindex/ts02.png" },
        { name: "设置", src: "../../static/image/userindex/sz02.png" },
      ],
      login_state: true,
      user_info: {},
    };
  },
  onLoad() {
    this.getData();
  },
  onShow() {
    this.getData();
    this.user_info = uni.getStorageSync("user_info")
      ? JSON.parse(uni.getStorageSync("user_info"))
      : {};
  },
  methods: {
    // 遍历订单资料
    //个人资料
    toInfo() {
      uni.navigateTo({
        url: "/pages/user/info",
      });
    },
    //获取用户信息
    getData() {
      uni.request({
        url: "/phone/user/index",
        success: (res) => {
          this.loading = false;
          console.log(res);
          res = res.data;
          if (res.code == 4) {
            uni.setStorageSync("user_info", "");
            this.login_state = false;
          }
          if (res.code == 1) {
            this.login_state = true;
            this.user_info = res.msg.user_info;
            // console.log(this.user_info.head)
            var pic = this.user_info.head;
            var url;
            uni.getImageInfo({
              src: pic,
              success: (res) => {
                console.log(res);
                url = res.path;
                if (res.width > res.height)
                  url = url + "?x-oss-process=image/rotate,90";
                this.user_info.head = url;
              },
            });
            // this.user_info.head =url
            uni.setStorageSync("user_info", JSON.stringify(this.user_info));
            this.dfkNum = res.msg.order_pay;
            this.dshNum = res.msg.order_show;
            this.dfhNum = res.msg.order_delivery;
            this.dpjNum = res.msg.order_true;
            console.log(res);
          }
        },
      });
    },
    toZZ() {
      uni.navigateTo({
        url: "/pages/performance/index",
      });
    },
    toFX() {
      uni.navigateTo({
        url: "/pages/share/index",
      });
    },
    //选择功能菜单
    clickMenu(e) {
      switch (e) {
		case 0:
		  uni.navigateTo({
		    url: "/pages/user/collect",
		  });
		  break;
        case 1:
          uni.navigateTo({
            url: "/pages/user/foot",
          });
          break;
        case 2:
          uni.navigateTo({
            url: "/pages/address/list",
          });
          break;
        case 3:
          uni.navigateTo({
            url: "/pages/eval/fade",
          });
          break;
        case 4:
          uni.navigateTo({
            url: "/pages/user/setting",
          });
          break;
      }
      console.log(e);
    },
    //去登陆
    toLogin() {
      console.log(1);
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.user-info-body {
  // width: calc(100% - 59upx);
  // box-sizing: border-box;
  padding: 30upx;
  height: 200upx;
  box-sizing: border-box;
  // background: url(https://shop-made.oss-cn-hangzhou.aliyuncs.com/h5/order-bg.png) no-repeat;
  // background-size: 100%;
  background: linear-gradient(0deg, rgba(213, 21, 25, 1), rgba(249, 72, 76, 1));
}
.user-info-body::before {
  content: "";
  display: table;
}
// .user-info{margin-top:16upx}
.user-header-img {
  width: 140upx;
  height: 140upx;
  display: block;
  float: left;
  border-radius: 50%;
  margin-right: 30upx;
  margin-top: 5upx;
  vertical-align: middle;
}
.user-nick-name {
  float: left;
  color: #fff;
  line-height: 160upx;
  margin-left: 10upx;
  font-size: 40upx;
  font-weight: 700;
}
.user-login-btn {
  float: right;
  background: #ffffff;
  width: 170upx;
  height: 70upx;
  text-align: center;
  line-height: 70upx;
  margin-top: 44upx;
  border-radius: 35upx;
}
.order-menu {
  width: 100%;
  height: 200upx;
  background-color: #ffffff;
  // padding:30upx;
  // box-sizing: border-box;
  border-radius: 20upx;
  // background: url(../../static/image/userindex/ban01.png) no-repeat;
  background-size: 100%;
}
.dl_wz {
  line-height: 150upx;
}
.user-nick-name {
  .acitve {
    display: flex;
    image {
      margin-top: 6upx;
      width: 140upx;
      height: 140upx;
      margin-right: 30upx;
    }
  }
}
//  成绩资质  好友分享
.user_ch {
  width: 100%;
  height: 232upx;
  margin-top: 60upx;
  background-color: #f9f9f9;
  padding: 20upx 30upx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .user_zz {
    width: 332upx;
    height: 188upx;
    background: url(../../static/image/userindex/zz02.png) no-repeat;
    background-size: 100% 100%;
  }
  .user_fx {
    width: 332upx;
    height: 188upx;
    background: url(../../static/image/userindex/fx02.png) no-repeat;
    background-size: 100% 100%;
  }
}
.edit {
  width: 40upx;
  height: 40upx;
  margin-left: 20upx;
}
</style>
